import dash
from dash import dcc
from dash import html
from dash.dependencies import Input,Output,State

import dash_bootstrap_components as dbc

import plotly.express as px
import pandas as pd

tab_df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')

def generate_table(dataframe, max_rows=10):
    return dbc.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ],
    bordered=True,
    # dark=True,
    hover=True,
    responsive=True,
    striped=True,
    )

fig_df = pd.read_csv('./gapminderDataFiveYear.csv')

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    html.H1("Dash layout and callback practices",style={
        'textAlign':'center',
        'color':'#7FDBFF',
    },className='my-4'),
    dbc.Container([
        dbc.Row([
            dbc.Col(
                html.Div([
                    dcc.Graph(id="graph-with-slider"),
                    dcc.Slider(
                        id="year-slider",
                        min=fig_df['year'].min(),
                        max=fig_df['year'].max(),
                        value=fig_df['year'].min(),
                        marks={str(year): str(year) for year in fig_df['year'].unique()},
                        step=None,
                    )
                ],className='m-0 p-4 border shadow-sm rounded bg-light')
            ),
            dbc.Col(
                html.Div([
                    generate_table(tab_df)
                ],className='m-0 p-4 border shadow-sm rounded bg-light')
            )
        ]),
        dbc.Row([
            dbc.Col(
                html.Div([
                    dcc.Input(id="input-1-state", type="text", value="Mexico"),
                    dcc.Input(id="input-2-state", type="text", value="Canada"),
                    html.Button(id="submit-button-state", n_clicks=0, children="Submit"),
                    html.Div(id="output-state")
                ])
            )
        ])
    ],fluid=True)
])

@app.callback(
    Output("output-state", "children"),
    Input("submit-button-state","n_clicks"),
    State("input-1-state", "value"),
    State("input-2-state", "value"),

)
def update_output(n_clicks, input1, input2):
    return u'''
        The Button has been pressed {} times,
        Input 1 is "{}",
        and Input 2 is "{}"
    '''.format(n_clicks, input1, input2)

@app.callback(
    Output('graph-with-slider', 'figure'),
    Input('year-slider', 'value')
)
def update_figure(selected_year="1952"):
    filtered_df = fig_df[fig_df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap",y='lifeExp',
                    size='pop',color="continent",hover_name="country",
                    log_x=True,size_max=55)

    fig.update_layout(transition_duration=500)

    return fig

if __name__ == "__main__":
    app.run_server(debug=True)